<template>
  <div class="todo-footer">
        <label>
          <!-- 第二十三步：给全选按钮绑定点击事件，让点击全选按钮时，每条数据的选框被选中 -->
          <input type="checkbox" :checked="allIsChecked" @click="checkAllHandle"/>
        </label>
        <span>
          <span>已完成0</span> / 全部2
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
      </div>
</template>

<script>
export default {
    name:'Footer',
    props:["todoList","checkAllHandle"],
    // 第二十二步：用every方法遍历数据的done，所有都为true时把true给到多选框的checked属性
    // 注意：v-bind只能由data控制属性中的值，v-model才可以双向控制
    // 注意：我们需要在数据为0时，把全部选中的按钮取消全选,所以计算属性的返回值需要再加一个判断，且数据不为0才返回true
    computed:{
      allIsChecked(){
       return this.todoList.every((item)=>{
              return item.done 
          })&& this.todoList.length!=0
      }
    }
}
</script>

<style scoped>
/*footer*/
.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}

.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}

.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}
</style>